<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SDK Demo</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <script src="./js/vconsole.min.js"></script>
    <style>
      .main {
        display: flex;
        flex: 1;
        flex-direction: column;
      }
      .action {
        height: 100px;
        border: 1px solid #eee;
      }
      .request {
        height: 180px;
        border: 1px solid #eee;
      }
      .margin-top-10 {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h3>xiao100-sdk demo</h3>
      <div class="row" class="margin-top-10">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">Action：</span>
          </div>
          <input type="text" class="form-control" id="action" value="getUserInfo" />
        </div>
      </div>
      <div class="row request">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">方法参数</span>
          </div>
          <textarea class="form-control" id="param" aria-label="With textarea"></textarea>
        </div>
      </div>
      <div class="row">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">返回结果</span>
          </div>
          <textarea
            class="form-control"
            style="height:200px"
            disabled
            aria-label="With textarea"
            id="result"
          ></textarea>
        </div>
      </div>
      <div class="row margin-top-10">
        <button type="button" class="btn btn-primary btn-lg btn-block" onclick="execute()">
          执行
        </button>

        <p class="margin-top-10">
          Web 页面监听了action：nativeCallWeb。<a
            href="javascript:void(0)"
            onclick="nativeCallWeb()"
            >前端模拟回调web</a
          >
        </p>
      </div>
    </div>
    <script src="../dist/xiao100-sdk.es5.js"></script>
    <script type="text/javascript">
      // init vConsole
      var vConsole = new VConsole();
      console.log(xiao100Sdk);

      var actionEl = document.querySelector('#action');
      var paramEl = document.querySelector('#param');
      var resultEl = document.querySelector('#result');
      paramEl.innerText = '{ "refresh": false }';
      resultEl.innerText = '';

      function execute() {
        var actionName = actionEl.value;
        var params = paramEl.value || '{}';
        if (!actionName || !actionName.trim()) {
          resultEl.innerText = '方法名称不能为空';
          return;
        }
        try {
          params = JSON.parse(params);
        } catch (error) {
          console.log(error);
          resultEl.innerText = '参数JSON序列化失败';
          return;
        }
        resultEl.innerText = '';
        window.XiaoAppJSBridge.invoke(
          'APP_GLOBAL', // handler
          actionName.trim(), // action
          function(res) {
            console.log(res);
            resultEl.innerText = JSON.stringify(res);
          },
          params // data 参数
        );
      }

      // 监听方法让 Native 回调
      window.XiaoAppJSBridge.register('nativeCallWeb', function(data, cb) {
        console.log('nativeCallWeb，结果为：', data);
        resultEl.innerText = '调用成功-nativeCallWeb，结果：' + JSON.stringify(data);
        cb(data);
      });

      function nativeCallWeb() {
        window.XiaoAppJSBridge.postMessage({
          action: 'nativeCallWeb',
          data: { name: 'xiao' },
          callbackId: 'native_call_web_0'
        });
      }
    </script>
  </body>
</html>
